<template>
	<view class="login_content">
		<view class="login_up">
			<view class="up_content">
				<image src="../../static/img/app_logo.png"></image>
				<view style="font-size: 18px; margin-top: 15px;">

				</view>
			</view>
		</view>

		<view class="login_box">
			<view class="input-row">
				<image src="../../static/img/user.png"></image>
<!-- 				<m-input class="m-input" type="text" clearable focus v-model="account" placeholder="User ID"></m-input> -->
				<m-input class="m-input" type="text" clearable v-model="account" placeholder="User ID"></m-input>
			</view>
			<view class="input-row">
				<image src="../../static/img/pwd.png"></image>
				<m-input type="password" displayable v-model="password" placeholder="Password"></m-input>
			</view>
		</view>
		<view class="btn-row"><button type="primary" class="primary" :class="{ active_primary: isShowBtn }" @tap="bindLogin">Login</button></view>
		<view class="mask" v-if="showMasks()">
			<view class="mask_title">为了让APP正常运行，需要完成以下操作</view>
			<view class="mask_list">
				<view class="mask_item">
					<view class="item_up">
						<text>1</text>
						<image src="../../static/img/loginImg1.png"></image>
					</view>
					<view class="item_down">点击屏幕底部的按钮。</view>
				</view>
				<view class="mask_item">
					<view class="item_title">
						<text>2</text>
						<view>进入设置后，点击“位置”</view>
					</view>
					<image class="img_local" src="../../static/img/loginImg2.jpg"></image>
					<view class="item_text">然后选择“始终”</view>
					<image class="img_sel" src="../../static/img/loginImg3.jpg"></image>
				</view>
				<view class="mask_item">
					<view class="item_title">					
						<text>3</text>
						<view>返回学生管理系统</view>
						<!-- <image src="../../static/img/loginImg1.png"></image> -->
					</view>
					<view class="item_down">完成上述步骤后，请重新打开 学生管理系统 并登录</view>
				</view>
			</view>
			<button class="mask_btn" @tap="openSetting">打开手机设置</button>
		</view>
	</view>
</template>

<script>
	import service from '../../service.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import mInput from '../../components/m-input.vue';
	import api from '../../api/loginApi.js';
	import otherApi from '../../api/otherApi.js';
	import utils from '../../api/utils.js';

	export default {
		components: {
			mInput
		},
		data() {
			return {
				providerList: [],
				hasProvider: false,
				account: '',
				password: '',
				positionTop: 0,
				isShowBtn: false,
				clientId: '' 
			};
		},
		watch: {
			account(val) {
				if (!!val) {
					this.isShowBtn = true;
				} else {
					this.isShowBtn = false;
				}
			}
		},
		computed: mapState(['forcedLogin', 'typeID']),
		methods: {
			...mapMutations(['login', 'saveTypeID']),
			showMasks: function() {  
				const isDirty = uni.getStorageSync('isDirty');
				if (isDirty) {
					return false;
				} 
				else{
					return true;
				}
			},
			// 打开设置
			openSetting() {
				uni.setStorage({
					key: 'isDirty',
					data: true
				});
				
				//跳转到应用的设置页面
				var notiClass = plus.ios.importClass("NSNotificationCenter");
				notiClass.defaultCenter().postNotificationNameobject("CheckLocatePermission","NULL");
			},
			async bindLogin() {
				let _this = this;
				uni.showLoading({
					title: 'Please wait...',
					mask: true
				});
				if (_this.isShowBtn) {
					let clintId = _this.clientId;
					let platformStr = uni.getSystemInfoSync().platform;
					// let clintId = '';
					// let platformStr = '';
					console.log(clintId, '>>>clintId');
					console.log(platformStr, '>>>platformStr');
					let data = await api.getLogin(
						`login?username=${_this.account}&password=${_this.password}&userClientId=${clintId}&platform=${platformStr}`
					);
					if (data.head.status) {
						_this.login(_this.account);
						_this.saveTypeID(data.body.userRole);
						if (data.body.gruSysUser.userType == '学生') {
							uni.getLocation({
								type: 'wgs84',
								geocode: true,
								async success(res) {
									console.log(res);
									let savePosition = await otherApi.savePosition(
										'position/savePosition', {
											latitude: res.latitude,
											longitude: res.longitude,
											position: (
												res.address.country +
												res.address.province +
												res.address.city +
												res.address.district +
												res.address.street +
												res.address.streetNum
											).replace(/undefined/g, '')
										},
										data.body.token
									);
								}
							});
						}

						uni.setStorage({
							key: 'token',
							data: data.body.token
						});
						uni.setStorage({
							key: 'userInfo',
							data: data.body.gruSysUser
						});
						uni.setStorage({
							key: 'clintId',
							data: clintId
						});
						setTimeout(() => {
							uni.redirectTo({
								url: '../index/index'
							});
						}, 500);

						if (data.body.gruSysUser.userType == '学生') {
							if ('iOS' == plus.os.name) {
								var UserDefaultsClass = plus.ios.importClass('NSUserDefaults');
								var standardUserDefaults = UserDefaultsClass.standardUserDefaults();
								plus.ios.invoke(standardUserDefaults, 'setObject:forKey:', data.body.token, 'token');
								plus.ios.invoke(standardUserDefaults, 'synchronize');

								var temptoken = plus.ios.invoke(standardUserDefaults, 'objectForKey:', 'token');
								console.warn('token is is is token is is is' + temptoken);
							}
							if ('Android' == plus.os.name) {
								console.log('before token is ' + data.body.token);
								var main = plus.android.runtimeMainActivity(); //

								console.log('aaaaaaaaaaaa' + main);
								var sp = plus.android.invoke(main, 'getSharedPreferences', 'com.student.preferences', 0);
								console.log('bbbbbbbbbbbbbbbbbb' + sp);
								var editor = plus.android.invoke(sp, 'edit');
								console.log('cccccccc' + editor);
								console.log('middle token is ' + data.body.token);

								plus.android.invoke(editor, 'putString', 'token', data.body.token);
								plus.android.invoke(editor, 'commit');

								var token = plus.android.invoke(sp, 'getString', 'token', '');
								console.log('after token is ' + token);
							}
						}
					} else {
						uni.showToast({
							title: data.head.msg,
							icon: 'none',
							duration: 2000
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: 'Please user id！'
					});
				}
				uni.hideLoading();
			}
		},
		onReady() {
			let _this = this;
		    var t1 = setInterval(function()
			{
		       let clientId = plus.push.getClientInfo().clientid;
			     if(clientId)
		         {
		            console.warn('cid==='+clientId);
					clearInterval(t1);
					_this.clientId = clientId;
		         }                   
			},500);
			
			console.warn('Are you ready?');
			
		},
		async onLoad() {

		}
	};
</script>

<style scoped>
	.login_up {
		background-color: #d72729;
		width: 100%;
		height: 200px;
		margin-top: -10px;
		position: absolute;
	}

	.up_content {
		position: absolute;
		width: 90%;
		height: 160px;
		background-color: #fff;
		bottom: -2px;
		left: 0;
		right: 0;
		margin: auto;
		flex-direction: column;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}

	.up_content image {
		width: 75px;
		height: 75px;
	}

	.login_content {
		/* padding: 30px; */
		width: 100%;
	}

	.login_box {
		margin-top: 130px;
		padding: 30px;
		width: 100%;
		box-sizing: border-box;
	}

	.input-row {
		padding: 8px;
		border-radius: 50px;
		background-color: #ffedeb;
		margin-bottom: 8px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.input-row image {
		width: 25px;
		height: 25px;
		margin-right: 5px;
	}

	.uni-input-placeholder {
		color: #c6999b;
	}

	.un_password {
		text-align: right;
		font-size: 12px;
		color: #999;
		margin-top: 10px;
		margin-bottom: 70px;
	}

	.btn-row {
		padding: 0 30px;
		width: 100%;
		box-sizing: border-box;
	}

	.btn-row .primary {
		border-radius: 50px;
		background-color: #eda22d;
	}

	.active_primary {
		background-color: #D72729 !important;
	}
	
	/* 遮罩样式 */
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #6CBAE8;
		z-index: 9999;
		top: 0;
	}
	
	.mask_title {
		color: #fff;
		font-size: 15px;
		width: 100%;
		padding: 15px 12px 20px 12px;
		box-sizing: border-box;
		text-align: center;
		line-height: 30px;
	}
	
	.mask_item {
		width: 100%;
		padding: 0 5px;
		box-sizing: border-box;
		margin-bottom: 3px;
	}
	
	.mask_item .item_up {
		display: flex;
		align-items: center;
	}
	
	.mask_item .item_up text {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		text-align: center;
		line-height: 16px;
		color: #fff;
		background-color: #94CDE9;
		padding: 2px;
		font-size: 14px;
		margin-right: 10px;
	}
	
	.mask_item .item_up image {
		height: 50px;
		width: 240px;
	}
	
	.mask_item .item_title {
		display: flex;
		align-items: center;
		height: 30px;
	}
	
	.mask_item .item_title text {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		text-align: center;
		line-height: 16px;
		color: #fff;
		background-color: #94CDE9;
		padding: 2px;
		font-size: 14px;
		margin-right: 10px;
	}
	
	.mask_item .item_title view {
		color: #fff;
		font-size: 10px;
	}
	
	.mask_item .img_local {
		height: 40px;
		width: 300px;
		margin-left: 30px;
		margin-top: 5px;
	}
	
	.mask_item .img_sel {
		width: 300px;
		height: 200px;
		margin-top: 5px;
		margin-left: 30px;
	}
	
	.mask_item .item_text {
		color: #fff;
		width: 100%;
		padding-left: 30px;
		box-sizing: border-box;
		margin: 5px 0;
		font-size: 14px;
	}
	
	.mask .mask_btn {
		width: 160px;
		border-radius: 20px;
		margin-top: 20px;
		background-color: #E83392;
		color: #fff;
	}
	
	.item_down {
		color: #fff;
		width: 100%;
		padding-left: 35px;
		box-sizing: border-box;
		margin-top: 5px;
		font-size: 14px;
	}
</style>
